<template>
  <PageWrapDrawer
  :show="show" :isUpdate="props.isUpdate" title-suffix="员工"
  @success="onSubmit"
  @on-drawer-close="onClose">
    <Form
    name="basic"
    :model="insideData.data"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    layout="horizontal"
    >
      <Row>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="账号/工号" name="username" v-bind="validateInfos['data.username']">
            <a-input v-model:value="insideData.data.username"/>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem v-if="!isUpdate" label="密码" name="password" v-bind="validateInfos['data.password']">
            <a-input-password v-model:value="insideData.data.password"/>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="姓名" name="name" v-bind="validateInfos['data.name']">
            <a-input v-model:value="insideData.data.name"/>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="电话" name="phone" v-bind="validateInfos['data.phone']">
            <a-input v-model:value="insideData.data.phone"/>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="电子邮件" name="email" v-bind="validateInfos['data.email']">
            <a-input v-model:value="insideData.data.email"/>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="年龄" name="age">
            <InputNumber v-model:value="insideData.data.age" :min="0" :max="150" style="width: 100%;"/>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="性别" name="gander">
            <RadioGroup v-model:value="insideData.data.gender">
              <Radio :value="1">男</Radio>
              <Radio :value="2">女</Radio>
              <Radio :value="0">未知</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="启用" name="enable">
            <RadioGroup v-model:value="insideData.data.enable" :disabled="insideData.data.ID === 1">
              <Radio :value="1">启用</Radio>
              <Radio :value="2">禁用</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="24">
          <FormItem
          label="所属角色" name="roles"
          :label-col="{ xs: {span: 6}, sm: {span: 6}, md: {span: 6}, lg: {span: 6}, xl: {span: 3}, xxl: {span: 3} }"
          :wrapper-col="{ xs: {span: 16}, sm: {span: 16}, md: {span: 16}, lg: {span: 16}, xl: {span: 20}, xxl: {span: 20} }"
          >
            <Select
            v-model:value="selectedRoleList" mode="tags" placeholder="请选择"
            allowClear showArrow
            :disabled="insideData.data.ID === 1"
            :get-popup-container="(tn) => tn.parentNode"
            :field-names="{label: 'name', value: 'ID',}"
            :options="selectedOptionsRoleList"/>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem
          label="备注" name="memo"
          :label-col="{ xs: {span: 6}, sm: {span: 6}, md: {span: 6}, lg: {span: 6}, xl: {span: 3}, xxl: {span: 3} }"
          :wrapper-col="{ xs: {span: 16}, sm: {span: 16}, md: {span: 16}, lg: {span: 16}, xl: {span: 20}, xxl: {span: 20} }"
          >
            <a-textarea
            v-model:value="insideData.data.memo" 
            :auto-size="{ minRows: 3, maxRows: 3, }"
            placeholder="备注一下..."/>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </PageWrapDrawer>
</template>
<script lang="ts" name="userDrawer" setup>
import {
Col,
Form, FormItem,
InputNumber,
Radio, RadioGroup,
Row,
Select,
} from 'ant-design-vue';
import { reactive, ref, toRaw, watchPostEffect } from 'vue';
import { getListData as getRoleListData } from '/@/api/admin/role';
import { create, update } from '/@/api/sys/user';
import { PageWrapDrawer } from '/@/components/PageWrapDrawer';

const emit = defineEmits(['on-success', 'on-drawer-close'])
const props = defineProps({
    show: Boolean,
    isUpdate: Boolean,
    row: {type: [Object, null] as PropType<Object | null>, default: null,},
})

const useForm = Form.useForm;
const insideData = reactive({
  data: {
    ID: null,
    username: '',
    password: '',
    name: '',
    phone: '',
    email: '',
    age: 0,
    gender: 0,
    enable: 1,
    memo: '',
    roles: [],
  }
});
const selectedRoleList = ref([]);
const selectedOptionsRoleList = ref<any>([]);

const rulesRef = reactive({
  'data.username': [
    {required: true, message: '请输入账号/工号',},
  ],
  'data.password': [
    {required: true, message: '请输入密码',},
  ] as unknown,
  'data.name': [
    {required: true, message: '请输入姓名',},
  ],
  // 'data.phone': [
  //   {required: true, message: '请输入电话',},
  // ],
});
watchPostEffect(async () => {
  let v1 = props.row as any
  if (v1) {
    insideData.data = {...v1}
    selectedRoleList.value = v1.roles.map((e:any) => e.ID)
  }

  if (props.show && v1?.ID !== 1) {
    await getRoleListData().then(d => {
      selectedOptionsRoleList.value = d.map(e => {
        return {...e, disabled: e.enable == 2}
      })
    })
  }
  if (props.show && props.isUpdate) {
    delete rulesRef['data.password']
  }
})

const {resetFields, validate, validateInfos} = useForm(insideData, rulesRef, {
  onValidate: (...args) => {
  },
});

const onSubmit = () => {
  validate()
    .then(async () => {
      let data = toRaw(insideData.data)
      data.roles = selectedRoleList.value
      if (props.isUpdate) {
        await update(data).then(() => {
          onClose()
        })
      } else {
        await create(data).then(() => {
          onClose()
        })
      }
      emit('on-success')
    });
}

const onClose = () => {
  rulesRef['data.password'] = [
    {required: true, message: '请输入密码',},
  ]
  selectedRoleList.value = []
  selectedOptionsRoleList.value = []
  Object.assign(insideData, {data: {}});
  resetFields();
  emit('on-drawer-close');
};

</script>
